<template>
<div class="tw-libmobilesearch">
  <van-search
    v-model="values"
    :label="label"
    :shape="shape"
    :clearable="clearable"
    :show-action="showaction"
    :action-text="actiontext"
    :background="background"
    :input-align="inputalign"
    :maxlength="maxlength"
    :placeholder="placeholder"
    @search="handleSearch"
    @clear="handleClear"
  />
</div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'search-mobile',

  mixins: [style],

  data () {
    return {
      values: ''
    }
  },

  props,

  computed: {
    style () {
      return {
      }
    }
  },

  methods: {
    handleSearch (val) {
      this.values = val

      this.$emit('input', val)
      this.$emit('search', val)
    },

    handleClear () {
      this.values = ''

      this.$emit('input', '')
      this.$emit('search', '')
    },

    setStyle () {
      let style = `
        ::root.tw-libmobilesearch {

        }

      `

      this.addStyle(style)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
